import React from 'react'
import Css from './style/commom.module.css'
import Myx from './img/myx.jpg'
import Dianzan from './img/点赞.png'
import Pinglun from './img/评论.png'
import More from './img/更多.png'
import Shinping from './img/视频播放a.png'
import Sanjiao from './img/播放 三角形.png'
import Playing from './img/正在播放.png'
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
class Demo extends React.Component {
    constructor() {
        super()
        this.state = {
            arr: []
        }
    }
    componentDidMount() {
        fetch('http://106.12.79.128:666/video/group?id=58104'
            , {
                credentials: 'include'
            })
            .then(body => body.json())
            .then(res => {
                console.log(res);
                this.setState({
                    arr: res.datas
                })
                console.log(this.state.arr)
            })
    }
    Appendzero(obj) {
        if (obj < 10) return "0" + obj; else return obj;
    }
    render() {

        return (
            <div>
                {this.state.arr.map((item, index) => {
                    return (
                        <div>
                            <Link to={`/morevideo?${item.data.vid}`}>

                                <div key={index} className={Css.div}>

                                    {/* 用于定位 */}
                                    {/* <img src={Shinping} alt="" className={Css.divvideo}/> */}
                                    <img src={Sanjiao} alt="" className={Css.divsanjiao} />
                                    <img src={Playing} alt="" className={Css.divplaying} />
                                    <p className={Css.divplaytime}>{`${this.Appendzero(parseInt(item.data.durationms / 1000 / 60 % 60))}:${this.Appendzero(parseInt(item.data.durationms / 1000 % 60))}`}</p>
                                    {/* <img src={item.data.coverUrl} alt="" className={Css.myxImg}/> */}
                                    <video className={Css.myxVideo} src={item.data.urlInfo.url}
                                        controls poster={item.data.coverUrl}>
                                    </video>

                                    <p className={Css.myxP}>{item.data.title}</p>
                                    <div className={Css.myxuser}>
                                        <img src={item.data.creator.avatarUrl} alt="" className={Css.myxusertouxiang} />
                                        <p className={Css.myxusername}>{item.data.creator.nickname}</p>
                                        <div className={Css.myxusersmore}>
                                            <img src={Dianzan} alt="" className={Css.myxuserdianzan} />
                                            <img src={Pinglun} alt="" className={Css.myxuserpinglun} />
                                            <img src={More} alt="" className={Css.myxusermore} />
                                        </div>
                                    </div>
                                </div>
                            </Link>
                            <div className={Css.myxgrey}></div>
                        </div>
                    )
                })
                }
            </div>
        )
    }
}

export default Demo